<template>
  <div ref="tc" class="tiny-chart"></div>
</template>

<script>
import DailyChart from "./DailyChart.js";

export default {
  name: "TinyChart",
  props: {
    values: {
      type: Array,
      default: () => [
        12.94, 13.0, 12.98, 13.02, 13.0, 13.0, 12.95, 12.85, 13.04, 13.13,
      ],
    },
    options: {
      type: Object,
      default: () => ({
        colorPositive: "#4F7CD3",
        fillPositive: "#4F7CD366",
        closeColor: "",
        lineWidth: 2,
      }),
    },
  },
  data() {
    return {
      tc: new DailyChart(),
      defaultOptions: {
        colorPositive: "#4F7CD3",
        fillPositive: "#4F7CD366",
        closeColor: "#FFFFFF",
        closeWidth: 0,
        lineWidth: 2,
      },
    };
  },
  computed: {},
  mounted() {
    this.update();
  },
  beforeDestroy() {
    this.tc.destroy(this.$refs.tc);
  },
  methods: {
    update() {
      this.$nextTick(() => {
        const min = Math.min.apply(null, this.values);
        const max = Math.max.apply(null, this.values);
        this.$refs.tc.innerHTML = "";
        this.tc.create(
          this.$refs.tc,
          this.values,
          Object.assign(this.defaultOptions, this.options, {
            close: min - (max - min) * 0.5,
          })
        );

        // console.log(this.values)
      });
    },
  },
  watch: {
    values() {
      this.update();
    },
  },
};
</script>
<style lang="scss" scoped>
.tiny-chart {
  width: 100%;
  height: 100%;
}
</style>
